<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"
	scope="session" />
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>login</title>
<link rel="stylesheet" type="text/css"
	href="${ctx }/xjain/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/xjain/css/demo.css" />
<!--必要样式-->
<link rel="stylesheet" type="text/css"
	href="${ctx }/xjain/css/component.css" />
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
	<div class="container demo-1">
		<div class="content">
			<div id="large-header" class="large-header">
				<canvas id="demo-canvas"></canvas>
				<div class="logo_box">
					<h3>怡海阁欢迎你</h3>
					<form>
						<div class="input_outer">
							<input name="name" class="text" id="name" autofocus
								style="color: #FFFFFF !important" type="text"
								value="" placeholder="请输入账户"/>
							<div id="nameMsg"></div>
						</div>
						<div class="input_outer">
							<input name="pass" class="text" id="pass"
								style="color: #FFFFFF !important;"
								value="" type="password" placeholder="请输入密码"/>
							<div id="passMsg"></div>
						</div>
						<div class="input_outer">
							<input name="repass" class="text"
								style="color: #FFFFFF !important;"
								value="" type="password" placeholder="请再次输入密码"/>
							<div id="repassMsg"></div>
						</div>
						<div class="input_outer">
							<input name="phone" class="text" id="phone"
								style="color: #FFFFFF !important;"
								value="" type="text" placeholder="请输入手机号"/>
							<div id="phoneMsg"></div>
						</div>
						<div class="mb2">
							<div class="act-but submit" onclick="register()"
								style="color: #FFFFFF">注册</div>
						</div>
						<div class="mb2">
							<a class="act-but submit" href="${ctx }/index.jsp"
								style="color: #FFFFFF">返回</a>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- /container -->
	<script src="${ctx }/xjain/js/TweenLite.min.js"></script>
	<script src="${ctx }/xjain/js/EasePack.min.js"></script>
	<script src="${ctx }/xjain/js/rAF.js"></script>
	<script src="${ctx }/xjain/js/demo-1.js"></script>
	<div style="text-align: center;"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/localization/messages_zh.js" type="text/javascript" charset="utf-8"></script>
<script src="${ctx}/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
	$('form').validate({
		rules:{
			name:{
				required:true,
				rangelength:[2,10]
			},
			pass:{
				required:true,
				minlength:5
			},
			repass:{
				equalTo:"[name=pass]"
			},
			phone:{
				digits:true,
				rangelength:[11,11]
			}
		},
		messages:{
			name:{
				required:'姓名不能为空',
				rangelength:'姓名长度必须在2-10之间'
			},
			pass:{
				required:'密码不能为空',
				minlength:'密码必须是5位以上'
			},
			repass:{
				equalTo:'两次密码输入不一致'
			},
			phone:{
				rangelength:'请输入正确的手机号码'
			}
		},
		errorPlacement: function(error, element) {
 			name = element.attr('name');
			$('#'+name+'Msg').append(error);
			$('#'+name+'Msg').css({'color':'red','font-weight':'bold'});
		}
	});
	function register(){
		$.ajax({
			url:'${ctx}/UserServlet/register',
			type:'post',
			data:{"name":$("#name").val(),"pass":$("#pass").val(),"phone":$("#phone").val()},
			success:function(data){
				var jj=JSON.parse(data);
				if (jj['lll']=="true") {
					layer.msg('注册成功');
					window.location.href="${ctx}/index.jsp";
				}else if (jj['lll']=="false") {
					layer.msg('该用户已被占用');
					$(":input").val("");
				}
			}
		});
	}
</script>
</html>